<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" th:href="@{/plugin/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/plugin/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/plugin/Ionicons/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/css/AdminLTE.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/css/skins/all-skins.min.css}">
    <link rel="stylesheet" th:href="@{/system/css/common.css}"/>
    <link th:href="@{/plugin/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
</head>
<body>
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">响应式悬浮表格</h3>

                <div class="box-tools">
                    <div class="input-group input-group-sm hidden-xs" style="width: 150px;">
                        <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">

                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table id="table"></table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<script th:src="@{/plugin/jquery/jquery.min.js}"></script>
<script th:src="@{/plugin/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/plugin/fastclick/fastclick.js}"></script>
<script th:src="@{/adminlte/js/adminlte.min.js}"></script>
<script th:src="@{/plugin/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script th:src="@{/plugin/layer/layer.js}" ></script>

<script>
    var index;

    $('#table').bootstrapTable({
        url: '/user/list',
        pagination: true,
        sidePagination: "client",
        pageSize: 2,
        locale: "zh-CN",
        columns: [
            {
                checkbox: true
            },
            {
            field: 'userName',
            title: '用户名'
        }, {
            field: 'userType',
            title: '用户类型'
        }, {
            field: 'email',
            title: 'email'
        },
            {
                field: 'phonenumber',
                title: '电话'
            },
            {
                field: "sex",
                title: "性别",
                formatter: function (value, row, index){
                    if (value == 0){
                        return "男"
                    } else if (value == 1){
                        return "女"
                    } else {
                        return "未知";
                    }
                }
            },
            {
                field: "avatar",
                title: "头像",
                formatter: function (value, row, index){
                   return `<img src="${value}" alt="用户头像" class="img-circle">`;
                }
            },
            {
                title: "操作",
                formatter: function (value, row, index){
                    if (row.nickName == 'admin'){
                        return `<button type="button" class="btn btn-sm btn-default" onclick="show(${row.userId})">查看</button>`;
                    }
                    return `
                        <button type="button" class="btn btn-sm btn-default" onclick="show(${row.userId})">查看</button>
                        <button type="button" class="btn btn-sm btn-info" onclick="grant(${row.userId})">授权</button>
                    `;
                }
            }
        ]
        , responseHandler: function (data) {
            if (data.code == 200) {
                return data.data;
            } else {
                console.error("获取数据失败");
                return [];
            }
        }
    });

    function grant(id){
        // console.log("给用户" + id + "授权");
        index = layer.open({
            title: '授权'
            ,type: 2
            , area: ['580px', '500px']
            ,maxmin : true
            ,shade: 0.8
            ,resize: true
            ,content: '/user/grant?id=' + id //iframe的url
        });
    }
</script>
</body>
</html>